import {
   getToken,
   setToken,
   removeToken,
   setTimeStamp
} from '@/utils/auth'
// require 一般会在加载图片时使用,只有执行到这行代码时才会加载
// import() 函数是加载到这行代码时才会执行
// import {  } from 导入时，打开页面时就会加载
import { login, getUserInfo, getUserDetailById } from '@/api/user'
import { resetRouter } from '@/router'
const state = {
   // 设置token 为共享状态
   // 初始化 vuex 时，先从缓存中读取
   token: getToken(),
   // 用户资料
   // 定义一个空对象
   userInfo: {}
}
const mutations = {
   // token
   setToken(state, token) {
      // 将数据设置给 vuex
      state.token = token
      // 同步给缓存
      setToken(token)
   },
   removeToken(state) {
      // 将 vuex 的数据置空
      state.token = null
      // 同步给缓存
      removeToken()
   },
   // 用户资料  设置跟删除
   setUserInfo(state, result) {
      // 更新一个对象   直接赋值是响应式
      state.userInfo = result
      // 下边这种也是响应式，属于浅拷贝
      // state.userInfo = { ...result }
      // 这个不是响应式
      // state.userInfo['username'] = result
   },
   removeUserInfo(state) {
      state.userInfo = {}
   }
}
const actions = {
   // token
   // 外层的login是封装的函数
   async login(context, data) {
      // 调用 api 的接口
      // const result = await login(data)
      // // axios 默认加了一层 data
      // if (result.data.success) {
      //    // 如果true,登录成功
      //    // result.data.data 拿到token
      //    // 拿到用户token，存储到 vuex 跟缓存中
      //    context.commit('setToken', result.data.data)
      // }
      // 拿到token
      const result = await login(data)
      // 设置token
      // 因为响应拦截器已经解构完成，返回的就是 data.data
      context.commit('setToken', result)
      // token 失效的主动处理  前端的处理
      // 拿到token 说明登录成功了，那么存入时间戳
      // 设置当前的时间戳
      setTimeStamp()
   },
   // 用户资料
   // 只能得到 data 因为响应拦截器已经解构
   async getUserInfo(context) {
      // 获取返回值
      const result = await getUserInfo()
      // 获取用户详情，因为需要用上边的接口的id，所以写到他的下边等他执行完了
      // 用户的详情数据
      const baseInfo = await getUserDetailById(result.userId)
      // 合并两个对象，这样既有基本信息也有头像了
      const obj = {
         ...result,
         ...baseInfo
      }
      // 提交到 mutations
      context.commit('setUserInfo', obj)
      // 这里返回是给我们后期做权限的时候，留下伏笔
      return result
   },
   // 登出的操作
   logout(context) {
      // 不仅仅删除了 vuex 中的，也删除了缓存中的
      // 删除 token
      context.commit('removeToken')
      // 删除 用户资料
      context.commit('removeUserInfo')
      // 重置路由
      resetRouter()
      // 去设置权限模块下的路由为初始状态
      // vuex 子模块调用子模块的 action ，都没加锁的情况下，可以随意调用
      // 因为不加命名空间的情况下，所有的 mutations 跟 action都是挂在全局上的
      // 所以可以直接调用
      // 但是加了命名空间的子模块怎么调用另一个加了命名空间的子模块的mutations
      // 加了命名空间的 context 指的不是全局的 context
      // 参数1：mutation 的名称  参数2：载荷 payload  参数3： 对象 { root: true }
      // root 为 true 表示调用根级的 mutations 跟 actions
      // 跳过了 父级，到了子级，调用子级
      context.commit('permission/setRoutes', [], { root: true })
   }
}
export default {
   // 命名空间
   namespaced: true,
   state,
   mutations,
   actions
}
